<template>
	<view class="pages-home" v-if="isLoad">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="首页"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="box-become">
			<view class="start fill-base" @tap="changeWork">
				<view class="box-unaudited-btn flex-center flex-column" :style="{background: configInfo.kgbt_color}">
					<view class="c-base f-sm-title">{{coachInfo.is_work == 0 ? `开工打卡` : `停止接单`}}</view>
					<view class="f-mini-title c-base" style="opacity: 0.5;">{{currentDate}}</view>
				</view>
			</view>
			
			<view class="mt-md fill-base become-user pl-lg pr-lg">
				<view class="flex-y-center pb-lg">
					<image class="user-header" :src="coachInfo.work_img" mode="aspectFill"></image>
					<view class="pl-md flex-1">
						<view class="f-sm-title text-bold">{{coachInfo.name}}</view>
						<view class=" flex-1 flex-y-center">
							<text class="f-caption">已入驻</text>
							<text class="f-icontext c-text pr-sm">{{!coachInfo.company_id ? '（平台员工）' : ''}}</text>
							<block v-if="coachInfo.company_name">
								<text style="display: inline-block;height: 24rpx;" class="b-l" :style="{borderColor: primaryColor}"></text>
								<text class="f-caption pl-sm pr-sm " >企业名: {{coachInfo.company_name}}</text>
							</block>
							<block v-if="coachInfo.dept">
								<text style="display: inline-block;height: 24rpx;" class="b-r" :style="{borderColor: primaryColor}"></text>
								<text class="f-caption pl-sm ">{{coachInfo.dept}}</text>
							</block>
						</view>
					</view>
				</view>
				<view class="radius-16 pt-lg" :style="{boxShadow: `0px 1px 3px 0px #EEE`}">
					<view class="pl-lg pr-lg flex-between">
						<text class="f-mini-title text-bold c-904000">营业数据</text>
						<view class="flex-center" @tap="$util.goUrl({url: `/user/pages/statistics`})">
							<text class="f-caption" style="color: #774A25;">查看全部</text>
							<i class="iconfont icon-right text-bold ml-sm" style="font-size: 10px;color: #824D2E;"></i>
						</view>
					</view>
					<view class="flex-warp trade-list">
						<view class="flex-1" v-for="(item,index) in tradeList" :key="index">
							<view class="text-bold f-sm-title c-904000 text-center">{{item.number}}</view>
							<view class="f-caption text-center" style="color: #AC7C66;">{{item.title}}</view>
						</view>
					</view>
				</view>
				
				<view class="pb-sm pt-lg flex-between">
					<view class="f-paragraph c-mini-title">今日服务订单</view>
					<view class="flex-between order-type radius-10" :style="{borderColor: primaryColor}" v-if="configInfo.plugAuth.demand">
						<view class="order-type-item pl-md pr-md pt-sm pb-sm f-caption rel" v-for="(item,index) in orderType" :key="index" @tap="changeType(item.id)"
						:style="{background: orderIndex == item.id ? primaryColor : '', color: orderIndex == item.id ? '#fff' : '#333'}">
							{{item.name}}
							<view class="abs order-count c-base fill-warning f-little flex-center" v-if="allCount[item.type]">新</view>
						</view>
					</view>
				</view>
				<view class="">
					<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
						width="20%" height="100rpx"></tab>
				</view>
			</view>
			<block v-if="orderIndex == 0">
				<block v-for="(item,index) in list.data" :key="index">
					<view class="mt-md fill-base pl-lg pr-lg radius-16 pb-lg ml-md mr-md" 
					@tap="$util.goUrl({url: `/user/pages/home/detail?id=${item.id}`})">
						<view class="b-1px-b order-top flex-y-center ">
							<view class="flex-1">
								<view class="pb-sm flex-y-center">
									<block v-if="[3,4].includes(item.status)">
										<text class="f-ms-title c-title text-bold">距离上门:</text>
										<view class="flex-y-center f-ms-title flex-1 pl-sm">
											<min-countdown :targetTime="item.start_time * 1000" @callback="countEnd" :isPlay="true" :type="4" style="height: 46rpx;"></min-countdown>
										</view>
									</block>
									<view class="flex-1" v-else></view>
									<view class="f-mini-title text-bold" :style="{color: statusObj[item.status] && statusObj[item.status].color}">{{ statusObj[item.status] && statusObj[item.status].title}}</view>
								</view>
								<view class="f-paragraph c-paragraph">上门时间: <text class="c-warning">{{$util.formatTime(item.start_time*1000, 'YY-M-D h:m')}}</text> </view>
							</view>
						</view>
						<view class="flex-y-center pt-md">
							<text class="f-min-title">订单编号：</text>
							<text class="f-desc c-caption">{{item.order_code}}</text>
						</view>
						<view class="pt-sm pb-lg flex-center" v-for="(gitem,gindex) in item.order_goods" :key="gindex">
							<image class="radius-16 order-img" :src="gitem.image" mode="aspectFill"></image>
							<view class="pl-md flex-1">
								<view class="flex-between">
									<text class="text-bold f-sm-title">{{gitem.name}}</text>
									<text class="f-mini-title c-paragraph">×1</text>
								</view>
								<view class="flex-warp">
									<text class="order-label f-caption" :style="{color: primaryColor,borderColor: primaryColor}">{{gitem.title}}</text>
								</view>
								<view class="text-bold f-sm-title pt-sm" :style="{color: primaryColor}">¥{{gitem.price}}</view>
							</view>
						</view>
						<view class="flex-between">
							<view class="f-paragraph c-paragraph flex-1 ellipsis">服务地址: {{item.address_info.address + item.address_info.address_info}}</view>
							<i class="iconfont icondianhua" @tap.stop="$util.goUrl({openType: 'call', url: item.address_info.mobile})"></i>
						</view>
						<view class="flex-between pt-lg">
							<view class=""></view>
							<view class="flex-center">
								<block v-if="item.status == 3">
									<view class="f-title text-bold order-btn flex-center" style="border: 1px solid #D1D1D1;" 
									@tap.stop="changeOrder(index, 'cancel')" v-if="item.can_cancel == 1">取消订单</view>
									<view class="f-title c-base order-btn flex-center ml-md" :style="{background: primaryColor}" 
									@tap.stop="changeOrder(index)">马上出发</view>
								</block>
								<block v-if="item.status == 4">
									<view class="f-title c-base order-btn flex-center ml-md" :style="{background: primaryColor}" 
									@tap.stop="changeOrder(index)">已到达</view>
								</block>
								<block v-if="item.status == 5">
									<view class="f-title c-base order-btn flex-center ml-md" :style="{background: primaryColor}" 
									@tap.stop="changeOrder(index)">开始服务</view>
								</block>
								<block v-if="item.status == 6">
									<view class="f-title text-bold order-btn flex-center pl-md pr-md" @tap.stop="setDifference(index, 1)"
									:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" 
									v-if="!item.add_price_list && item.order_type == 1">{{item.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
									<view class="f-title c-base order-btn flex-center ml-md pl-md pr-md" :style="{background: primaryColor}" 
									@tap.stop="changeOrder(index)"> {{item.order_type == 1 ? `输入验收码` : `服务完成`}} </view>
								</block>
								<!-- <block v-if="item.status == 7 && item.order_type == 1">
									<view class="f-title c-base order-btn flex-center ml-md" :style="{background: primaryColor}" 
									@tap.stop="changeOrder(index)">订单完成</view>
								</block> -->
							</view>
						</view>
					</view>
				</block>
			</block>
			<block v-else>
				<block v-for="(item,index) in list.data" :key="index">
					<view class="mt-md fill-base pl-lg pr-lg radius-16 pb-lg ml-md mr-md" 
					@tap="$util.goUrl({url: `/user/pages/home/demand?id=${item.id}`})">
						<view class="b-1px-b order-top flex-y-center">
							<view class="flex-1">
								<view class="pb-sm flex-y-center">
									<block v-if="[6,7].includes(item.status)">
										<text class="f-ms-title c-title text-bold">距离上门:</text>
										<view class="flex-y-center f-ms-title flex-1 pl-sm">
											<min-countdown :targetTime="item.start_time * 1000" @callback="countEnd" :isPlay="true" :type="4" style="height: 46rpx;"></min-countdown>
										</view>
									</block>
									<view class="flex-1" v-else></view>
									<view class="f-mini-title text-bold" :style="{color: demandStatus[item.status].color}">{{demandStatus[item.status].title}}</view>
								</view>
								<view class="f-paragraph c-paragraph">上门时间: <text class="c-warning">{{$util.formatTime(item.start_time*1000, 'YY-M-D h:m')}}</text> </view>
							</view>
						</view>
						<view class="flex-y-center pt-md">
							<text class="f-min-title">订单编号：</text>
							<text class="f-desc c-caption">{{item.order_code}}</text>
						</view>
						<view class="pt-sm pb-lg flex-center">
							<image class="radius-16 order-img" :src="item.type_img" mode="aspectFill"></image>
							<view class="pl-md flex-1">
								<view class="flex-between">
									<text class="text-bold f-sm-title">{{item.title}}</text>
									<text class="f-mini-title c-paragraph">×1</text>
								</view>
								<view class="flex-warp">
									<text class="order-label f-caption" :style="{color: primaryColor,borderColor: primaryColor}">{{item.f_name + ' / ' + item.s_name}}</text>
								</view>
								<view class="text-bold f-sm-title pt-sm" :style="{color: primaryColor}">¥{{item.price}}</view>
							</view>
						</view>
						<view class="flex-between">
							<view class="f-paragraph c-paragraph flex-1 ellipsis">服务地址: {{item.address + item.address_info}}</view>
							<i class="iconfont icondianhua" @tap.stop="$util.goUrl({openType: 'call', url: item.phone})"></i>
						</view>
						<view class="flex-between pt-lg">
							<view class="f-paragraph c-icontext pt-sm pb-sm">{{item.demand_fee_switch && item.type == 3 ? '联系下单人支付服务费' : ''}}</view>
							<view class="flex-center">
								<view class="f-title text-bold order-btn flex-center" style="border: 1px solid #D1D1D1;"
								@tap.stop="changeOrder(index, 'cancel')" v-if="item.can_cancel == 1">取消订单</view>
								<view class="f-title text-bold order-btn flex-center pl-md pr-md" @tap.stop="setDifference(index)" 
								:style="{border: `1px solid ${primaryColor}`, color: primaryColor}"
								v-if="[9].includes(item.status) && !item.add_price_list && item.type != 3">
								{{item.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
								<view class="f-title c-base order-btn flex-center ml-md" :style="{background: primaryColor}" v-if="[6,7,8,9].includes(item.status)"
								@tap.stop="changeOrder(index)">{{statusButton[item.status]}}</view>
							</view>
						</view>
					</view>
				</block>
			</block>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<block v-if="form.order_type == 2">
					<view class="f-title flex-center h-80 text-bold rel">服务完成
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">上传付款凭证</view>
					<view class="pb-lg flex-center">
						<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.image" imgtype="image" text="上传图片" :imgsize="9"
							:pictureSize="5" imgclass="mini">
						</upload>
					</view>
					<view class="flex-center pb-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder(999,'service')">服务完成</view>
					</view>
				</block>
				<block v-else>
					<view class="f-title flex-center h-80 text-bold rel">验收
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<block v-if="orderIndex == 0">
						<view class="f-paragraph text-bold pb-lg pt-lg">输入验收码</view>
						<view class="pb-lg flex-center">
							<view class="">
								<xt-verify-code v-model="form.check_code" :size="4" cursorColor="#fff"></xt-verify-code>
							</view>
						</view>
					</block>
					<block v-if="configInfo.coach_end_order_upload">
						<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
						<view class="pb-lg flex-center">
							<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
								:pictureSize="5" imgclass="mini">
							</upload>
						</view>
					</block>
					<view class="flex-center pb-lg pt-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder(999,'service')">确定</view>
					</view>
				</block>
			</view>
		</uni-popup>
		
		
		
		<view class="space-footer"></view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="1"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import xtVerifyCode from "@/components/xt-verify-code"
	let timer = null
	export default {
		components: {
			tabbar,
			xtVerifyCode
		},
		data() {
			return {
				isLoad: false,
				status: 1 ,
				statusButton: {
					6: '马上出发',
					7: '已到达',
					8: '开始服务',
					9: '服务完成'
				},
				statusObj: {
					'-2': {title: '已取消', color: '#999999'},
					'-1': {title: '已取消', color: '#999999'},
					3: {title: '待上门', color: '#999999'},
					4: {title: '已出发', color: '#999999'},
					5: {title: '待开始', color: '#999999'},
					6: {title: '服务中', color: '#999999'},
					7: {title: '服务完成', color: '#999999'},
					8: {title: '订单完成', color: '#999999'}
				},
				demandStatus: {
					'-2': {title: '已取消', color: '#999999'},
					'-1': {title: '已取消', color: '#999999'},
					6: {title: '待上门', color: '#999999'},
					7: {title: '已出发', color: '#999999'},
					8: {title: '待开始', color: '#999999'},
					9: {title: '服务中', color: '#999999'},
					10: {title: '服务完成', color: '#999999'},
					11: {title: '订单完成', color: '#999999'}
				},
				demandType: {
					0: 0,
					1: 6,
					2: 8,
					3: 9,
					4: 10,
					5: '-2'
				},
				loading: true,
				currentDate: '',
				form: {
					image: [],
					id: '',
					status: '',
					order_type: 2,
					check_code: '',
					order_check_img: []
				},
				orderIndex: 0,
				orderType: [{
					name: '标准订单',
					id: 0,
					type: 'service_count'
				},{
					name: '需求订单',
					id: 1,
					type: 'demand_count'
				}],
				allCount: ''
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
			tradeList: state => state.home.tradeList,
			tabList: state => state.home.tabList,
			activeIndex: state => state.home.activeIndex,
			list: state => state.home.list,
			param: state => state.home.param, 
			pageActive: state => state.home.pageActive, 
		}),
		async onLoad(options) {
			this.$util.showLoading()
			let cur_time = new Date(Math.ceil(new Date().getTime()))
			let today = this.$util.formatTime(cur_time, 'YY-M-D') + ' 23:59:59'
			let start_time = this.$util.DateToUnix(this.$util.formatTime(cur_time, 'YY-M-D'))
			let end_time = this.$util.DateToUnix(today)
			let param = this.$util.deepCopy(this.param)
			param.start_time = start_time
			param.end_time = end_time
			this.updateHomeItem({
				key: 'param',
				val: param
			})
			
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.page + 1);
		},
		onUnload() {
			if(timer){
				clearInterval(timer)
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getCoachInfo', 'getOrderCount', 'getHomeOrderList']),
			...mapMutations(['updateHomeItem']),
			async initIndex(refresh = false){
				this.currentDate = this.$util.formatTime('', 'h:m:s')
				timer = setInterval(()=>{
					this.currentDate = this.$util.formatTime('', 'h:m:s')
				},1000)
				if(!this.pageActive || refresh){
					await this.getConfigInfo({is_coach: 1})
				}
				if(!this.coachInfo.id || refresh){
					await this.getCoachInfo()
				}
				// if(this.pageActive && !refresh){
				// 	this.$util.hideAll()
				// 	this.isLoad = true
				// 	this.loading = false
				// 	return
				// }
				let allCount = await this.$api.home.getTodayCount()
				this.allCount = allCount
				await Promise.all([this.getOrderCount(),this.getList(1)])
				this.$util.hideAll()
				this.isLoad = true
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getList(page = 0){
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.page = page
					this.updateHomeItem({
						key: 'param',
						val: param
					})
				}
				let {
					list: oldList,
					param,
					orderIndex = 0
				} = this
				try {
					param.orderIndex = orderIndex
					await this.getHomeOrderList(param)
					console.log(this.list , '==============> list')
					this.loading = false
					this.$util.hideAll()
				} catch (e) {
					this.loading = false
					this.$util.hideAll()
				}
			},
			handerTabChange(index) {
				this.updateHomeItem({
					key: 'activeIndex',
					val: index
				})
				let param = this.$util.deepCopy(this.param)
				param.status = this.orderIndex == 0 ? this.tabList[index].id : this.demandType[index]
				this.updateHomeItem({
					key: 'param',
					val: param
				})
				this.$util.showLoading()
				this.getList(1)
			},
			// 接单
			async changeWork(){
				let {
					is_work = 0
				} = this.coachInfo
				this.$util.showLoading()
				await this.$api.home.updateWork({is_work: is_work == 0 ? 1 : 0})
				this.getCoachInfo()
				this.$util.hideAll()
				this.$util.showToast({
					title: '操作成功'
				})
			},
			// 补差价
			setDifference(index,type = 0){
				let {
					id,
					is_add = 0
				} = this.list.data[index]
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&type=${type}&is_add=${is_add}`})
			},
			async standardOrder(index, type = ''){
				let {
					id,
					status,
					order_type,
					is_add = 0
				} = type == 'service' ? this.form : this.list.data[index]
				if(type != 'service'){
					this.form.order_check_img = []
					this.form.image = []
					this.form.check_code = ''
				}
				let param = {
					id,
					status
				}
				
				if(status == 3){ // 待上门
					param.status = 4
				}else if(status == 4){ // 已出发
					param.status = 5
				}else if(status == 5){ // 待开始
					param.status = 6
				}else if(status == 6){ // 待验收
					this.form.order_type = order_type
					if(order_type == 2){ // 需要上传图片  上门回收
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}else{ // 验收
						if(is_add == 1){
							this.$util.showToast({
								title: '补完差价才能输入验收码'
							})
							return
						}
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}
					// param.status = 8
				}
				if(type == 'cancel'){
					// param.status = 2
					// let [res_del, {
					// 	confirm
					// }] = await uni.showModal({
					// 	content: `请确认是否要取消订单`,
					// })
					// if (!confirm) return;
					this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				
				if(type == 'service'){
					let form = this.$util.deepCopy(this.form)
					if(form.order_type == 2){
						if(form.image.length == 0){
							this.$util.showToast({
								title: '请上传付款凭证'
							})
							return
						}
						param.order_pay_img = form.image.map(item => {
							return item.path
						})
					}else{
						let {
							check_code = ''
						} = form
						if(check_code.length != 4){
							this.$util.showToast({
								title: '请输入验收码'
							})
							return
						}
						if(form.order_check_img.length > 0){
							param.order_check_img = form.order_check_img.map(item => {
								return item.path
							})
						}
						param.check_code = check_code
						param.status = 7
					}
				}
				this.$util.showLoading()
				await this.$api.order.updateOrder(param)
				if(type == 'service'){
					this.$refs.order_box.close()
				}
				this.$util.hideAll()
				this.$util.showToast({
					title: param.status == 2 ? '取消成功' : '操作成功'
				})
				this.getList(1)
			},
			async demandOrder(index,type){
				console.log(index,type)
				let {
					id,
					status,
					order_type
				} = type == 'service' ? this.form : this.list.data[index]
				if(type != 'service'){
					this.form.image = []
					this.form.order_check_img = []
					this.form.id = id
					this.form.status = status
					this.form.order_type = 1
				}
				let param = {
					id,
					status
				}
				if(status == 9 && this.configInfo.coach_end_order_upload && type!='service'){ // 服务完成 是否上传图片
					this.$refs.order_box.open()
					return
				}
				// 图片上传
				let form = this.$util.deepCopy(this.form)
				if(type == 'service' && form.order_check_img.length > 0){
					param.order_check_img = form.order_check_img.map(item => {
						return item.path
					})
				}
				console.log(type , this.form)
				param.status = param.status + 1
				if(type == 'cancel'){
					this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				this.$util.showLoading()
				await this.$api.demand.updateOrderStatus(param)
				this.$util.hideAll()
				if(type == 'service'){
					this.$refs.order_box.close()
				}
				this.$util.showToast({
					title: '操作成功'
				})
				this.getList(1)
			},
			async changeOrder(index,type){
				if(this.orderIndex == 0){
					this.standardOrder(index,type)
				}else{
					this.demandOrder(index,type)
				}
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			countEnd(){},
			changeType(index){
				this.orderIndex = index
				let param = this.$util.deepCopy(this.param)
				param.status = index == 0 ? this.tabList[this.activeIndex].id : this.demandType[this.activeIndex]
				this.updateHomeItem({
					key: 'param',
					val: param
				})
				this.$util.showLoading()
				this.getList(1)
			}
		},
	}
</script>


<style lang="scss">
	.pages-home {
		.box-unaudited{
			padding-top: 200rpx;
		}
		.box-unaudited-btn{
			width: 208rpx;
			height: 208rpx;
			border-radius: 208rpx;
			margin: 0 auto;
		}
		.box-become{
			.start{
				padding: 50rpx 0;
			}
			.become-user{
				padding-top: 60rpx;
			}
			.user-header{
				width: 85rpx;
				height: 85rpx;
				border-radius: 85rpx;
			}
			.b-l{
				border-left: 1px solid;
			}
			.b-r{
				border-right: 1px solid;
			}
			.c-904000{
				color: #904000;
			}
			.trade-list{
				padding-top: 40rpx;
				padding-bottom: 35rpx;
			}
			.order-type{
				// height: 56rpx;
				border: 1px solid;
			}
			.order-top{
				min-height: 153rpx;
			}
			
			.order-img{
				width: 145rpx;
				height: 145rpx;
			}
			.order-label{
				padding:0 2px;
				border-radius: 2px;
				border: 1px solid;
			}
			.order-btn{
				min-width: 207rpx;
				height: 81rpx;
				border-radius: 12rpx;
			}
		}
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
		.order-count{
			right: 0;
			top: -30rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
		}
	}
</style>
